<template>
  <div>
    <!-- 3.使用组件 -->
    <!-- v-循环创建出来的组件都是独立的Vue实例对象,每循环一次创建一个,并且传入对应的数据 -->
    <MyProduct
      v-for="(item,index) in list"
      :key="item.id"
      :title="item.proname"
      :price="item.proprice"
      :info="item.info"
      :index="index"
    ></MyProduct>
  </div>
</template>
<script>
// App.vue->父
// MyProduct.vue->子

// 父向子通信的流程
// 1.在子组件中使用props定义要接收的数据,并使用它们(用法同data数据中的数据)
// 2.在父组件中通过属性的方式传递给子组件

// 1.引入组件
import MyProduct from "./components/MyProduct.vue";

export default {
  components: {
    // 2.注册组件
    MyProduct,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超级好吃的棒棒糖",
          proprice: 18.8,
          info: "开业大酬宾, 全场8折",
        },
        {
          id: 2,
          proname: "超级好吃的大鸡腿",
          proprice: 34.2,
          info: "好吃不腻, 快来买啊",
        },
        {
          id: 3,
          proname: "超级无敌的冰激凌",
          proprice: 14.2,
          info: "炎热的夏天, 来个冰激凌了",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
</style>